<template>
  <div class="department-container">
    <div class="app-container">
      <el-card>
        <!-- 用一个行列布局 -->
        <el-row type="flex" justify="space-between" align="middle" style="height: 40px">
          <el-col :span="20">
            <svg-icon icon-class="home" /><span>江苏传智播客教育科技股份有限公司</span>
          </el-col>
          <el-col :span="4">
            <el-row type="flex" justify="end">
              <!-- 两个内容 -->
              <el-col>负责人</el-col>
              <!-- 下拉菜单 element -->
              <el-col>
                <el-dropdown>
                  <span style="margin-left: 30px">
                    操作<i class="el-icon-arrow-down"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="hShowState('add',1)">添加子部门</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
            </el-row>
          </el-col>
        </el-row>

        <!-- 组织架构的树形图 -->
        <el-tree :data="list" default-expand-all :props="defaultProps" :expand-on-click-node="false">
          <!-- 主体部分 -->
          <template #default="{data}">
            <el-row type="flex" justify="space-between" align="middle" style="height: 40px;width: 100%;">
              <el-col :span="20">
                <svg-icon icon-class="home" /><span>{{ data.name }}</span>
              </el-col>
              <el-col :span="4">
                <el-row type="flex" justify="end">
                  <!-- 两个内容 -->
                  <el-col>{{ data.managerName }}</el-col>
                  <!-- 下拉菜单 element -->
                  <el-col>
                    <el-dropdown>
                      <span style="margin-left: 30px">
                        操作<i class="el-icon-arrow-down"></i>
                      </span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="hShowState('add',data.id)">添加子部门</el-dropdown-item>
                        <el-dropdown-item @click.native="hShowState('edit',data.id)">编辑部门</el-dropdown-item>
                        <el-dropdown-item v-if="data.children.length===0" @cancel="hClose" @click.native="hDel(data.id)">删除部门</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-tree>
      </el-card>
    </div>

    <!-- dialog位置  -->
    <el-dialog :title="isEdit ? '编辑' : '添加'" :visible.sync="showDialog" width="50%" :close-on-press-escape="false" :close-on-click-modal="false">
      <!-- 这里把dialog里面的内容封装到一个组件中，方便维护 v-if="showDialog" ref="deptDialog"  -->
      <add-or-edit v-if="showDialog" :id="currentId" :origin-list="originList" :is-edit="isEdit" @cancel="hClose" @successChange="hSuccess" />
    </el-dialog>

  </div>
</template>

<script>
import { delDepartDetailById, getDepartMentList } from '@/api/departments'
import { transListToTreeData } from '@/utils'
import addOrEdit from '@/views/department/deptDialog.vue'

export default {
  name: 'Department',
  components: {
    addOrEdit
  },
  data() {
    return {
      list: [],
      isEdit: false, // isEdit: false表示为添加，true表示为编辑
      showDialog: false,
      originList: [],
      currentId: '',
      defaultProps: {
        // children: 'children', // 表示层级关系的属性名
        label: 'name' // 渲染节点文本的属性名
      }
    }
  },
  created() {
    this.loadGetDepartment()
  },
  methods: {
    // 获取部门数据
    async loadGetDepartment() {
      const res = await getDepartMentList()
      // console.log(res.data)
      // res.data.shift()
      // console.log(res.data)
      this.list = transListToTreeData(res.data)
      // console.log(this.list)
      // 处理数据，因为子组件需要这些数据，把这写数据放在一个数组中
      this.originList = res.data.map(({ id, pid, code, name }) => ({ id, pid, code, name }))
      // console.log(this.originList)
    },

    // 显示隐藏dialog
    hShowState(type, id) {
      this.showDialog = true
      this.currentId = id
      if (type === 'add') {
        this.isEdit = false
      } else {
        this.isEdit = true
        // // 如果是编辑就获取子组件里面的方法
        // this.$nextTick(() => {
        //   this.$refs.deptDialog.loadGetDepartDetail()
        // })
      }
    },

    // 子组件新增部门成功之后，父组件关闭dialog
    hSuccess() {
      this.showDialog = false
      this.loadGetDepartment()
    },

    // 点击删除部门
    async hDel(id) {
      // 提示用户是否删除
      const res = await this.$confirm('您确认要删除吗?', '提示', {
        type: 'warning'
      }).catch(e => e)
      if (res === 'cancel') return
      try {
        const res = await delDepartDetailById(id)
        // console.log(res)
        // 提醒用户
        this.$message.success(res.message)
        // 从新渲染页面
        this.loadGetDepartment()
      } catch (error) {
        this.$message.error(error.message)
      }
    },

    // 子传父，让父组件关闭dialog
    hClose() {
      this.showDialog = false
    }

  }
}
</script>

<style lang="scss" scoped>

</style>
